<script lang="ts" setup>
const route = useRoute()
const router = useRouter()

let activeName = $ref<string>('first')

const handleClick = (val: string) => {
  if (val === 'first')
    router.push('/home')
  else if (val === 'second')
    router.push('/count')
}

onMounted(() => {
  if (route.path === '/home')
    activeName = 'first'
  else if (route.path === '/count')
    activeName = 'second'
})
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
    <el-tab-pane label="Home" name="first" />
    <el-tab-pane label="Count" name="second" />
  </el-tabs>
  <router-view />
</template>

<style scoped></style>
